<template>
	<view class="page">
		<view class="pageH">

		</view>
		<view class="pageS">
			<swiper class="swiper" :autoplay="autoplay" :interval="100" :duration="duration" :current="current"
				:circular="circular" @change="swiperChangeFun" @animationfinish="animationfinishFun"
				disable-programmatic-animation>
				<swiper-item v-for="(item,index) in swiperList" :key="index">
					<view class="swiper-item">
						<scroll-view class="scrollView" scroll-y="true">
							<view class="section">
								<view class="title">
									<view class="type dis_f_c_c">
										<text v-if="item.type==0">判断</text>
										<text v-else-if="item.type==1">单选</text>
										<text v-else-if="item.type==2">多选</text>
										<text v-else-if="item.type==3">填空</text>
										<text v-else-if="item.type==4">简答</text>
									</view>
									<view :class="{'br':item.br}" v-if="item.type==3">
										<block v-for="(text,index) in getTkListFun(item)" :key="index">
											<template v-if="index!=0&&inputObj[item._id]">
												<input :class="`${item.vals.indexOf(inputObj[item._id][index-1])!=-1}`"
													type="text" v-model="inputObj[item._id][index-1]"
													:style="`width:${inputObj[item._id][index-1].length*34+22}rpx`"
													:disabled="item.br" />
											</template>
											<text>{{text}}</text>
										</block>
									</view>
									<text v-else>{{item.title}}</text>
								</view>
								<template v-if="item.type==0">
									<!-- 判断 -->
									<view class="ul" :class="item.br">
										<view class="li dis_f" :class="`${item.vals[0]==true}`"
											@click="brFun(item,true)">
											<view class="left"></view>
											<view class="right">
												<text>正确</text>
											</view>
										</view>
										<view class="li dis_f" :class="`${item.vals[0]==false}`"
											@click="brFun(item,false)">
											<view class="left"></view>
											<view class="right">
												<text>错误</text>
											</view>
										</view>
									</view>
									<view class="valTip" v-if="item.br">
										<text>答案选</text>
										<template v-if="item.vals[0]">
											<text class="true">正确</text>
										</template>
										<template v-else>
											<text class="true">错误</text>
										</template>
										<text>您选</text>
										<template v-if="item.myVals[0]">
											<text :class="`${item.vals[0]==item.myVals[0]}`">正确</text>
										</template>
										<template v-else>
											<text :class="`${item.vals[0]==item.myVals[0]}`">错误</text>
										</template>
									</view>
								</template>
								<template v-else-if="item.type==1">
									<!-- 单选 -->
									<view class="ul" :class="item.br">
										<block v-for="(data,dataI) in item.list" :key="dataI">
											<view class="li dis_f"
												:class="{'true':item.vals[0]==data.val,'select':item.myVals.indexOf(data.val)!=-1}"
												@click="chooseFun(item,data.val)" v-if="data.content">
												<view class="left"
													:class="{'noBgc':item.vals[0]!=data.val&&item.myVals[0]!=data.val}">
													<text>{{data.val}}</text>
												</view>
												<view class="right">
													<text>{{data.content}}</text>
												</view>
											</view>
										</block>
									</view>
									<view class="valTip" v-if="item.br">
										<text>答案选</text>
										<text class="true">{{item.vals[0]}}</text>
										<text>您选</text>
										<text :class="item.br">{{item.myVals[0]}}</text>
									</view>
								</template>
								<template v-else-if="item.type==2">
									<!-- 多选 -->
									<view class="ul" :class="item.br" v-if="item.br">
										<block v-for="(data,dataI) in item.list" :key="dataI">
											<view class="li dis_f" :class="{'true':item.vals.indexOf(data.val)!=-1}"
												@click="chooseFun(item,data.val)" v-if="data.content">
												<view class="left">
													<text>{{data.val}}</text>
												</view>
												<view class="right">
													<text>{{data.content}}</text>
												</view>
											</view>
										</block>
									</view>
									<view class="ul choose" v-else>
										<block v-for="(data,dataI) in item.list" :key="dataI">
											<view class="li dis_f" :class="{'select':item.myVals.indexOf(data.val)!=-1}"
												@click="chooseFun(item,data.val)">
												<view class="left">
													<text>{{data.val}}</text>
												</view>
												<view class="right">
													<text>{{data.content}}</text>
												</view>
											</view>
										</block>
									</view>
									<view class="valTip" v-if="item.br">
										<text>答案选</text>
										<text class="true">{{item.vals.join("、")}}</text>
										<text>您选</text>
										<text :class="item.br">{{item.myVals.join("、")}}</text>
									</view>
									<view class="btn dis_f_c_c" @click="confirmFun(item)" v-else>
										<text>确认答案</text>
									</view>
								</template>
								<template v-else-if="item.type==3">
									<!-- 填空 -->
									<view class="btn dis_f_c_c" @click="confirmFun(item)" v-if="!item.br">
										<text>确认答案</text>
									</view>
								</template>
								<template v-else-if="item.type==4">
									<!-- 简答 -->
									<view class="btn dis_f_c_c" @click="confirmFun(item)" v-if="!item.br">
										<text>查看解析</text>
									</view>
								</template>
								<view class="content" v-if="item.br">
									<view class="title dis_f_l_c">
										<text>题目解析</text>
									</view>
									<view class="valTip" v-if="item.type==3">
										<block v-for="(text,index) in getTkListFun(item)" :key="index">
											<template v-if="index!=0&&inputObj[item._id]">
												<text class="true">{{item.vals[index-1]}}</text>
											</template>
											<text>{{text}}</text>
										</block>
									</view>
									<text v-else>{{item.content||"暂无"}}</text>
								</view>
							</view>
						</scroll-view>
					</view>
				</swiper-item>
			</swiper>
			<view class="disabled" v-if="disableTouch"></view>
		</view>
		<view class="pageFBg" @click="footerShow=false;" v-if="footerShow"></view>
		<view class="pageF hyy" :class="{'show':footerShow}">
			<view class="pageFH dis_f_sb_c">
				<view class="left">

				</view>
				<view class="right" @click="footerShowFun">
					<text>{{activeIndex}}</text><text>/</text><text>{{listLength}}</text>
				</view>
			</view>
			<view class="pageFS box">
				<scroll-view class="scrollView" :scroll-into-view="scrollIntoView" scroll-y="true"
					@scrolltolower="getBtnsFun">
					<unicloud-db ref="udb" collection="fljwz-question-bank" field="_id" :page-size="96"
						v-slot:default="{data, loading, error, options}">
						<view class="ul dis_f_w">
							<block v-for="(item,index) in data" :key="index">
								<view class="li dis_f_c_c" :id="`btn${index+1}`">
									<view class="btn dis_f_c_c box"
										:class="[lxBrObj[item._id],activeIndex==index+1?'active':'',]"
										@click="linkFun(index+1)">
										<text>{{index+1}}</text>
										{{}}
									</view>
								</view>
							</block>
						</view>
					</unicloud-db>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script setup>
	const db = uniCloud.database();

	import {
		onLoad,
		onShow,
		onReachBottom,
		onShareAppMessage
	} from '@dcloudio/uni-app'
	import {
		ref,
		reactive,
		getCurrentInstance,
		nextTick,
	} from 'vue'
	// 公用方法
	let {
		proxy
	} = getCurrentInstance();
	let $js = proxy.$js;

	// 当前的题目是第几题
	let activeIndex = ref(1);

	// 轮播列表数据
	let swiperList = ref([]);
	// 轮播是否自动切换，用来控制自动跳转
	let autoplay = ref(false);
	// 记录轮播下标
	let swiperIndex = ref(0);
	// 是否无限循环
	let circular = ref(false);
	// 是否允许用户操作
	let disableTouch = ref(false);

	// 是否显示底部题库
	let footerShow = ref(false)
	let scrollIntoView = ref("");

	function footerShowFun() {
		scrollIntoView.value = "";
		footerShow.value = !footerShow.value;
		nextTick(() => {
			scrollIntoView.value = `btn${activeIndex.value}`;
		})
	}

	let udb = ref();

	function getBtnsFun() {
		udb.value.loadMore();
	}

	let inputObj = ref({});

	// 获取填空列表数据
	function getTkListFun(item) {
		if (!inputObj.value[item._id]) {
			inputObj.value[item._id] = [];
			item.title.match(/<input>/g).map((e) => {
				inputObj.value[item._id].push("");
			});
		}
		return item.title.split("<input>");
	}

	let pageSize = 5;

	// 数据长度
	let listLength = ref(0);
	// 页面加载
	onLoad((e) => {
		nextTick(() => {
			// 获取总条数
			db.collection("fljwz-question-bank").count().then((res) => {
				let {
					errCode,
					total
				} = res.result
				if (errCode == 0) {
					listLength.value = total;

					// 获取上次题目的位置
					let lastI = $js.getData("activeIndex") || 1;
					// 跳转到对应位置
					linkFun(lastI);
				}
			})
		})
	})

	// 点击跳转
	function linkFun(lastI) {
		swiperChangeBr = false;
		duration.value = 0;
		let page = lastI - 2;
		let swiperI = 2;
		// 如果小于3，都从第一题开始获取
		if (lastI < 3) {
			page = 1;
			// 更改轮播下标
			swiperI = lastI - 1;
		} else if (lastI > listLength.value - 2) {
			// 如果大于总长度，从最后拿数据
			page = listLength.value - pageSize + 1;
			// 更改轮播下标
			swiperI = lastI - listLength.value + pageSize - 1;
		}
		// 获取列表数据
		getListFun(page - 1, pageSize).then((res) => {
			if (res.errCode == 0 && res.data.length) {
				swiperList.value = res.data;
				// 设置轮播下标
				current.value = swiperI;
				swiperIndex.value = swiperI;
				// 设置当前题目的位置
				activeIndex.value = lastI;
				$js.setData("activeIndex", lastI);
				// 延迟一下
				setTimeout(() => {
					// 重新设置过渡动画的时间
					duration.value = 300;
					footerShow.value = false;
					swiperChangeBr = true;
				}, 100)
			}
		});
	}

	// 获取列表数据
	function getListFun(skipNum, limitNum) {
		return new Promise((resolve, reject) => {
			db.collection("fljwz-question-bank").skip(skipNum).limit(limitNum)
				.get({
					getCount: true
				}).then((res) => {
					let {
						errCode,
						data,
						count
					} = res.result
					data.map((item) => {
						if (lxObj.value[item._id]) {
							item.br = lxObj.value[item._id].br;
							item.myVals = lxObj.value[item._id].myVals;
						}
					})
					resolve({
						errCode,
						data,
						count
					})
				})
		})
	}

	// 判断
	function brFun(item, br) {
		if (!item.br) {
			item.myVals = [br];
			item.br = (item.vals[0] == br) + "";
			// 继续下一题
			nextFun(item);
		}
	}

	// 选择
	function chooseFun(item, val) {
		if (!item.br) {
			if (item.type == 1) {
				// 单选
				item.myVals = [val];
				item.br = (item.vals[0] == val) + "";
				// 继续下一题
				nextFun(item);
			} else {
				// 多选
				let i = item.myVals.indexOf(val);
				if (i != -1) {
					item.myVals.splice(i, 1);
				} else {
					item.myVals.push(val);
				}
			}
		}
	}

	// 确认答案
	function confirmFun(item) {
		if (item.type == 2) {
			// 多选
			if (item.myVals.length) {
				item.br = (item.vals.sort().join(",") == item.myVals.sort().join(",")) + "";
				// 继续下一题
				nextFun(item);
			} else {
				$js.tiShi("请选择选项")
			}
		} else if (item.type == 3) {
			// 填空
			let myVals = inputObj.value[item._id];
			let vals = item.vals;
			let br = vals.some((val) => {
				return myVals.indexOf(val) == -1;
			})
			item.br = !br + "";
			// 继续下一题
			nextFun(item);
		} else if (item.type == 4) {
			// 简答
			item.br = "look";
		}
	}

	// 练习对象
	let lxObj = ref({});
	// 练习是否正确的对象
	let lxBrObj = ref($js.getData("lxBrObj") || {});

	// 继续下一题
	function nextFun(item) {
		lxObj.value[item._id] = item;
		lxBrObj.value[item._id] = item.br;
		$js.setData("lxBrObj", lxBrObj.value);
		// 如果答对了，并且还有题目，自动下一题
		if (item.br == "true" && listLength.value != activeIndex.value) {
			autoplay.value = true;
			setTimeout(() => {
				autoplay.value = false;
			}, 150)
		}
	}

	// 轮播的change事件开关
	let swiperChangeBr = true;

	// 轮播下标改变时触发
	function swiperChangeFun(e) {
		current.value = e.detail.current;
		if (swiperChangeBr) {
			// 最后的下标
			let lastI = swiperIndex.value;
			// 最新的下标
			let newI = e.detail.current;

			swiperIndex.value = newI;
			if (newI - lastI == 1 - pageSize || newI - lastI == 1) {
				// 下一个
				// if (activeIndex.value + 1 <= listLength.value) {
				activeIndex.value += 1;
				getDataFun(2);
				// }
			} else {
				// 上一个
				activeIndex.value -= 1;
				getDataFun(-2);
			}
			// 存储题目的位置
			$js.setData("activeIndex", activeIndex.value);
			if (activeIndex.value <= 1 || activeIndex.value >= listLength.value) {
				swiperChangeBr = false;
				// 如果是第一个或者最后一个，禁止用户操作，等到动画执行完成再允许
				disableTouch.value = true;
			} else if (!circular.value) {
				// 如果是中间的数据，并且轮播被禁止循环了，就禁止用户操作，等动画结束开启循环
				disableTouch.value = true;
			}
		}
	}

	// 获取数据并修改
	function getDataFun(num) {
		// 要获取的题目的序号
		let activeI = activeIndex.value + num;
		// 如果序号超出题目的长度范围，就不处理
		if (activeI <= 0 || activeI > listLength.value) {
			return false;
		}
		// 轮播当前的下标
		let swiperI = swiperIndex.value + num;
		// 获取数据
		getListFun(activeI - 1, 1).then((res) => {
			if (res.errCode == 0 && res.data.length) {
				// 如果轮播的下标大于5
				if (swiperI >= pageSize) {
					swiperI = swiperI - pageSize;
				} else if (swiperI < 0) {
					swiperI = pageSize + swiperI;
				}
				swiperList.value[swiperI] = res.data[0];
			}
		});
	}

	let current = ref("");
	let duration = ref(0);

	let animationfinishI = ref(0);
	// 动画结束触发
	function animationfinishFun(e) {
		if (animationfinishI.value != activeIndex.value) {
			animationfinishI.value = activeIndex.value;
		} else {
			return false;
		}
		if (activeIndex.value <= 1) {
			// 如果是第一个，禁止循环
			circular.value = false;
			// 如果轮播不是第一个
			if (swiperIndex.value !== 0) {
				// 将过渡动画的时间设置成0
				duration.value = 0;
				// 获取最开始的两条数据
				getListFun(0, pageSize).then((res) => {
					if (res.errCode == 0 && res.data.length) {
						// 前两条数据
						let list = res.data;
						// 先将第一条数据更新过来
						swiperList.value[0] = list[0];
						// 设置当前是第几道题
						activeIndex.value = 1;
						// 设置轮播的下标，因为第一条数据更新过并且过渡时间设置成了0，逻辑上讲不会有闪动
						current.value = 0;
						swiperIndex.value = 0;
						// 延迟一下
						setTimeout(() => {
							// 重新设置过渡动画的时间
							duration.value = 300;
							// 更新第二条数据
							swiperList.value = list;
							// 允许用户操作
							disableTouch.value = false;
							swiperChangeBr = true;
						}, 400)
					}
				});
			} else {
				// 允许用户操作
				disableTouch.value = false;
				swiperChangeBr = true;
			}
		} else if (activeIndex.value >= listLength.value) {
			// 如果是最后一个，禁止循环
			circular.value = false;
			// 如果轮播不是最后一个
			if (swiperIndex.value !== pageSize - 1) {
				// 将过渡动画的时间设置成0
				duration.value = 0;
				// 获取最后两条数据
				getListFun(listLength.value - 5, pageSize).then((res) => {
					if (res.errCode == 0 && res.data.length) {
						let newIndex = pageSize - 1;
						// 前两条数据
						let list = res.data;
						// 先将最后一条数据更新过来
						swiperList.value[newIndex] = list[4];
						// 设置当前是第几道题
						activeIndex.value = listLength.value;
						// 设置轮播的下标，因为最后一条数据更新过并且过渡时间设置成了0，逻辑上讲不会有闪动
						current.value = newIndex;
						swiperIndex.value = newIndex;
						// 延迟一下
						setTimeout(() => {
							// 重新设置过渡动画的时间
							duration.value = 300;
							// 更新其它数据
							swiperList.value = list;
							// 允许用户操作
							disableTouch.value = false;
							swiperChangeBr = true;
						}, 400)
					}
				});
			} else {
				// 允许用户操作
				disableTouch.value = false;
				swiperChangeBr = true;
			}
		} else {
			circular.value = true;
			// 允许用户操作
			disableTouch.value = false;
		}
	}

	// 是否为返回页面
	let back = false;
	// 页面显示
	onShow(() => {
		// 如果是返回当前页面
		if (back) {

		} else {
			back = true;
		}
	})

	// 页面触底
	onReachBottom(() => {

	})

	// 分享
	onShareAppMessage(() => {
		return $js.getShareObjFun();
	})
</script>

<style lang="scss" scoped>
	.page {}

	$true: #45d000;
	$false: #ff0000;
	$choose: #1ddaff;
	$height: calc(100vh - var(--window-top));

	.pageH {}

	.pageS {
		position: relative;

		.disabled {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: $height;
			background: red;
			opacity: 0;
		}

		.swiper {
			height: $height;
		}

		.swiper-item {
			height: $height;
			background: #fff;

			.scrollView {
				height: 100%;

				.section {
					padding: 20rpx 24rpx;

					.title {
						font-size: 34rpx;
						color: #000;
						line-height: 44rpx;
						letter-spacing: 1rpx;
						margin-bottom: 20rpx;

						.type {
							display: inline-block;
							float: left;
							padding: 0 20rpx;
							background: red;
							color: #fff;
							flex: none;
							font-size: 20rpx;
							height: 36rpx;
							line-height: 40rpx;
							border-radius: 16rpx 16rpx 0 16rpx;
							margin-right: 10rpx;
						}

						input {
							line-height: 44rpx;
							display: inline-block;
							vertical-align: middle;
							min-width: 120rpx;
							font-size: 32rpx;
							height: 36rpx;
							padding: 0 10rpx;
							border-bottom: 1px solid #000;
							max-width: 80vw;
						}

						.br {
							.false {
								color: $false;
							}

							.true {
								color: $true;
							}
						}
					}

					.ul {

						&.choose {
							.li.select {
								.left {
									color: #fff;
									background: $choose;
									border-color: $choose;
								}

								.right {
									color: $choose;
								}
							}
						}

						&.true,
						&.false {
							.li.true {
								.left {
									color: #fff;
									background: $true;
									border-color: $true;
								}

								.right {
									color: $true;
								}
							}
						}

						&.false {

							.li.select,
							.li.false {
								.left {
									color: #fff;
									background: $false;
									border-color: $false;
								}

								.right {
									color: $false;
								}
							}
						}

						.li {
							margin-bottom: 30rpx;
							line-height: 48rpx;
							font-size: 32rpx;

							.left {
								width: 40rpx;
								height: 40rpx;
								border: 1px solid #ccc;
								border-radius: 50%;
								margin-right: 16rpx;
								font-size: 24rpx;
								line-height: 44rpx;
								text-align: center;
								font-size: #323232;
								flex: none;
								overflow: hidden;

								&.noBgc {
									background: transparent !important;
								}
							}
						}
					}

					.valTip {
						font-weight: bold;
						margin-bottom: 20rpx;
						padding: 20rpx 24rpx;
						background: #eee;
						border-radius: 16rpx;

						.true,
						.false {
							margin: 0 16rpx;
						}

						.true {
							color: $true;
						}

						.false {
							color: $false;
						}
					}

					.btn {
						width: 250rpx;
						height: 80rpx;
						color: #fff;
						border-radius: 40rpx;
						background: #ff596a;
						margin: 120rpx auto 40rpx;
					}

					.content {
						padding: 0 24rpx 20rpx;
						background: #eee;
						border-radius: 16rpx;
						line-height: 46rpx;

						.title {
							font-weight: bold;
							height: 80rpx;
							border-bottom: 1px solid #fff;
						}

						.valTip {
							padding: 0;
						}
					}
				}
			}
		}
	}

	.pageFBg {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: #000;
		opacity: 0.4;
	}

	.pageF {
		position: fixed;
		top: 100%;
		left: 0;
		width: 100%;
		background: #fff;
		transform: translateY(-100rpx);
		transition: all 0.6s;

		&.show {
			transform: translateY(-70vh);
			border-radius: 30rpx 30rpx 0 0;
		}

		.pageFH {
			height: 100rpx;
			padding: 0 24rpx;
		}

		.pageFS {
			border-top: 1px solid #f0f0f0;
			height: calc(70vh - 100rpx);

			.scrollView {
				width: 100%;
				height: 100%;

				.ul {
					.li {
						width: 125rpx;
						padding: 10rpx 0;

						.btn {
							width: 80rpx;
							height: 80rpx;
							border: 1px solid #ccc;
							border-radius: 50rpx;

							&.false {
								color: #fff;
								background: $false;
								border: none;
							}

							&.true {
								color: #fff;
								background: $true;
								border: none;
							}

							&.active {
								color: #fff;
								background: $choose;
								border: none;
							}
						}
					}
				}
			}
		}
	}
</style>